<template>
  <div class="app-container">
    <y-table ref="gridRef" v-bind="listOptions" @toolbar-button-click="toolbarButtonClickEvent">

      <template #iconname="{ row }">
        <!-- <i :class="row.iconName"></i> -->
        <!-- <el-input v-model="row.iconName" size="mini" @change="setKeyValue(row, 'iconName')"
          placeholder="iconName"></el-input> -->
        <y-icon-picker v-model="row.iconName" @input="setKeyValue(row, 'iconName')"></y-icon-picker>
      </template>
      <template #hidden="{ row }">
        <vxe-switch v-model="row.isHidden" size="mini" open-label="是" close-label="否" @change="setIsHidden(row)">
        </vxe-switch>
      </template>

      <template #component="{ row }">
        <el-input v-model="row.component" size="mini" @change="setKeyValue(row, 'component')"
          placeholder="请输入vue实际页面路径"></el-input>
      </template>
      <template #path="{ row }">
        <el-input v-model="row.path" size="mini" @change="setKeyValue(row, 'path')" placeholder="访问路径"></el-input>
      </template>
      <template #cache="{ row }">
        <vxe-switch v-model="row.cache" size="mini" open-label="是" close-label="否" @change="setKeyValue(row, 'cache')">
        </vxe-switch>
      </template>
      <template #redirect="{ row }">
        <el-input v-model="row.redirect" size="mini" @change="setKeyValue(row, 'redirect')"
          placeholder="跳转其他路由"></el-input>
      </template>
      <!--                    <template #breadcrumb="{row}">-->
      <!--                        <el-input v-model="row.breadcrumb"-->
      <!--                                  size="mini"-->
      <!--                                  @change="setKeyValue(row,'breadcrumb')"-->
      <!--                                  placeholder="面包屑"></el-input>-->
      <!--                    </template>-->
      <!--                    <template #active_menu="{row}">-->
      <!--                        <el-input v-model="row.activeMenu"-->
      <!--                                  size="mini"-->
      <!--                                  @change="setKeyValue(row,'activeMenu')"-->
      <!--                                  placeholder="激活菜单"></el-input>-->
      <!--                    </template>-->
    </y-table>
    <y-form-dialog :title="formOptions.title" ref="dialogFormRef" :form-options="formOptions"
      @confirm="confirmForm"></y-form-dialog>
  </div>
</template>
<script>
import YIconPicker from "@/components/YIconPicker";

import {
  getMenuList, updateMenu, addMenu, setMenuIsHidden, setMenuKeyValue, deleteMenu
} from '@/api/sys/menu' // 接口

import listMixin from '@/mixins/listMixin'

export default {
  mixins: [listMixin],
  components: {
    YIconPicker
  },
  data() {
    return {
      // 表格配置
      listOptions: {
        // 默认查询数据
        defaultQueryData: {
          // form
          form: {
            userType: 'admin'
          },
          // 其他查询参数
          params: {

          }
        },
        // 获取数据方法
        dataMethod: getMenuList,
        // 表格配置
        tableOptions: {
          rowConfig: {
            keyField: 'resId'
          },
          treeConfig: {
            transform: true,
            rowField: 'permitTitle', // 当前行唯一id
            parentField: 'parentPermit', // 父id
          },
          pagerConfig: {
            enabled: false
          },
          // 表格列
          columns: [
            { field: 'resTitle', width: 140, align: 'left', title: '菜单名称', treeNode: true },

            { field: 'path', title: '访问路径(path)', slots: { default: 'path' } },
            { field: 'component', title: '(component)', slots: { default: 'component' } },

            { field: 'redirect', title: '(redirect)', slots: { default: 'redirect' } },
            // { field: 'breadcrumb', title: '面包屑(breadcrumb)', slots: { default: 'breadcrumb' } },
            // { field: 'activeMenu', title: '激活菜单(active_menu)', slots: { default: 'active_menu' } },

            { width: 200, title: '图标', slots: { default: 'iconname' } },
            { field: 'userType', width: 80, title: '用户类别' },
            { field: 'permitTitle', width: 200, title: '所属权限' },
            { field: 'orderNum', width: 80, title: '排序号' },
            { field: 'cache', width: 80, title: '开启缓存', slots: { default: 'cache' } },
            { field: 'isHidden', width: 100, title: '是否隐藏', slots: { default: 'hidden' } },
            {
              title: '操作',
              width: 130,
              cellRender: {
                name: 'buttons',
                options: [
                  { content: '修改', name: 'edit' },
                  {
                    content: '更多', dropdowns: [
                      { content: '子级', name: 'info' },
                      { content: '删除', name: 'delete' }
                    ]
                  }
                ],
                events: {
                  click: ({ name, row }) => {
                    switch (name) {
                      case 'edit':
                        //开启禁用
                        this.formOptions.items.filter((item) => ['permitTitle', 'parentPermit'].includes(item.field))
                          .forEach(item => {
                            item.itemRender.props.disabled = true
                          })
                        this.openFormDialog({ row, refName: 'dialogFormRef' })
                        break
                      case 'info':
                        // 取消禁用
                        this.formOptions.items.filter((item) => ['permitTitle', 'parentPermit'].includes(item.field))
                          .forEach(item => {
                            item.itemRender.props.disabled = false
                          })
                        this.openFormDialog({ row: { parentPermit: row.permitTitle }, refName: 'dialogFormRef' })
                        break
                      case 'delete':
                        this.deleteRow({ row, deleteMethod: (row) => this.deleteMenu(row.resId) })
                        break
                      default:
                        break
                    }
                  }
                }
              }
            }
          ]
        },
        // 查询配置
        formOptions: {
          items: [
            {
              field: 'userType', title: '用户类别',
              itemRender: {
                name: 'ZSelect',
                props: {
                  dictCode: 'frame_user_type'
                }
              }
            },
            {
              field: 'keywords', title: '菜单名称',
              itemRender: { name: 'VxeInput', props: { maxlength: 50 } }
            }
          ]
        }
      },
      formOptions: {
        title: '菜单信息',
        items: [
          { field: "parentPermit", title: "父级菜单", itemRender: { name: 'VxeInput', props: { maxlength: 50 } } },
          { field: "permitTitle", title: "英文标识", required: true, itemRender: { name: 'VxeInput', props: { maxlength: 50 } } },
          { field: "resTitle", title: "菜单名称", required: true, itemRender: { name: 'VxeInput', props: { maxlength: 50 } } },
          {
            field: 'userType', title: '用户类别',
            itemRender: {
              name: 'ZSelect',
              props: {
                dictCode: 'frame_user_type'
              }
            }
          },
          {
            field: 'resType', title: '菜单类型',
            itemRender: {
              name: 'ZSelect',
              props: {
                dictCode: 'frame_menu'
              }
            }
          },
          { field: "path", title: "访问路径", itemRender: { name: 'VxeInput' } },
          { field: "iconName", title: "菜单图标", itemRender: { name: 'VxeInput' } },
          // { field: 'iconName', title:'菜单图标',
          //   slots:{
          //     default:'menuicon',
          //     props:{
          //       // 菜单图标列表
          //       iconList:[
          //         'far fa-cog','far fa-comment-alt-dots','far fa-chart-line',
          //         'far fa-globe','far fa-envelope','far fa-home','far fa-tv',
          //         'far fa-books', 'far fa-map-marked-alt','far fa-calendar-alt',
          //         'far fa-key-skeleton','far fa-tags','far fa-sack-dollar',
          //         'far fa-envelope-open-dollar', 'far fa-light fa-bell'
          //       ]
          //     }
          //   }
          // },
          { field: 'orderNum', title: '菜单排序', itemRender: { name: 'VxeInput', props: { type: 'number' } } },
          { field: 'memo', title: '备注', itemRender: { name: 'VxeTextarea', props: { maxlength: 500 } } },
        ]
      }
    }
  },
  /**
   * 组件挂载时异步执行的方法
   */
  async mounted() {
    // 动态设置查询参数
    // 此处的目的是根据某些条件或逻辑动态地设置组件的查询参数，以便在加载数据前做好准备
    await this.setFormQuery()

    // 加载数据
    // 通过refs引用调用loadData方法来加载数据
    this.$refs.gridRef.loadData()
  },
  methods: {
    /**
     * 工具栏按钮点击事件处理函数
     * @param {Object} event - 事件对象，包含按钮代码
     * 该函数根据点击的工具栏按钮代码，执行不同的操作
     */
    toolbarButtonClickEvent({ code }) {
      switch (code) {
        case 'add':
          // 执行添加操作，打开表单对话框
          this.openFormDialog({ row: null, refName: 'dialogFormRef' })
          break
        default:
          break
      }
    },
    //提交表单
    async confirmForm(form) {
      return new Promise((resolve, reject) => {
        this.saveOrUpdate(form).then(res => {
          if (res.status) {
            this.$message.success(res.message)
            this.$refs.gridRef.loadData()
            resolve(true)
          }
        })
      })
    },
    // 保存或修改
    saveOrUpdate(form) {
      if (form.resId) {
        return updateMenu(form)
      } else {
        return addMenu(form)
      }
    },
    // 设置是否隐藏
    setIsHidden(row) {
      setMenuIsHidden(row).then(res => {
        if (res.status) {
          this.$message.success('设置成功')
          // this.$refs.gridRef.loadData()
        }
      })
    },
    setKeyValue(row, key) {
      setMenuKeyValue(row, key).then(res => {
        if (res.status) {
          this.$message.success('设置成功')
          // this.$refs.gridRef.loadData()
        }
      })
    },
    // 删除
    deleteMenu(resId) {
      deleteMenu(resId).then(res => {
        if (res.status) {
          this.$message.success('删除成功')
          this.$refs.gridRef.loadData()
        }
      })
    },

    async setFormQuery() {
      // this.listOptions.defaultQueryData.form.pageSize = 50
      // this.listOptions.defaultQueryData.form.pageNum = 1
      // this.dictCampusList = await this.getDictItems("campus_list");
      // this.dictCollegeList = await this.getDictItems("college_list");
    },
    getRadioRow() {
      return this.$refs.gridRef.$refs.gridRef.getRadioRecord()
    },
    getCheckboxRow() {
      return this.$refs.gridRef.$refs.gridRef.getCheckboxRecords()
    }
  }
}
</script>

<style lang="scss" scoped></style>
